<template>
<div>
  <el-card class="box-card">

    <el-button  type="" size="mini" @click="insertDataOpen">添加</el-button>

   <el-table
      :data="resourceList"
      style="width: 100%">
      <el-table-column
        prop="id"
        align="center"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        align="center"
        label="名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="createdTime"
        align="center"
        label="创建时间">
      </el-table-column>
      <el-table-column
        prop="sort"
        align="center"
        label="排序">
      </el-table-column>
      <el-table-column
      align="center"
        label="操作">
        <template slot-scope="scope">
            <el-link @click="handleEdit(scope.row)">编辑</el-link>
             &nbsp;
             <el-link @click="handleDelete(scope.row)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
<br />

</el-card>

<el-dialog
  title="添加分类"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <div class="dialogDivClass">

  <el-form ref="form" :model="insertForm" label-width="80px" size="small">
  <el-form-item label="名称">
    <el-input v-model="insertForm.name"></el-input>
  </el-form-item>
  <el-form-item label="排序">
    <el-input v-model="insertForm.sort"></el-input>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="insertData" size="small">确定</el-button>
  </el-form-item>
</el-form>
 </div>
</el-dialog>
</div>
</template>

<script lang="ts">
import Vue from 'vue'
import { getCategoryAll, saveOrderUpdate, deleteCategory } from '@/service/resource'
export default Vue.extend({
  data () {
    return {

      dialogVisible: false,
      insertForm: {
        sort: '',
        name: ''
      },
      categoryList: [],
      resourceList: []

    }
  },
  methods: {
    async selTableData () {
      const { data } = await getCategoryAll()
      if (data.code === '000000') {
        this.resourceList = data.data
      }
    },

    handleEdit (row:any) {
      this.insertForm = { ...row }
      this.dialogVisible = true
    },
    handleDelete (row:any) {
      this.$confirm('确认删除？')
        .then(async () => {
          const { data } = await deleteCategory(row.id)
          if (data.code === '000000') {
            this.$message.success(data.mesg)
          } else {
            this.$message.error(data.mesg)
          }
          this.selTableData()
        })
    },

    handleClose (done:any) {
      this.$confirm('确认关闭？')
        .then(() => {
          this.insertForm = {
            sort: '',
            name: ''
          }
          done()
        })
    },
    async insertData () {
      const { data } = await saveOrderUpdate(this.insertForm)
      if (data.code === '000000') {
        this.$message.success(data.mesg)
        this.selTableData()
      } else {
        this.$message.success(data.mesg)
      }
      this.dialogVisible = false
    },
    insertDataOpen () {
      this.insertForm = {
        sort: '',
        name: ''
      }
      this.dialogVisible = true
    }

  },
  created () {
    this.selTableData()
  }
})

</script>

<style lang="scss" scoped>
  .dialogDivClass{
    width:50%;
    min-width:300px;
    margin:0 auto;
  }
</style>
